<template>
  <el-container>
    <el-header class="header">
      <el-row class="header-row" :gutter="10">
        <el-col :span="12">
          <div class="header-left">
            <div class="header-logo">
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
            </div>
            <span class="header-title">业务系统名称文本内容</span>
            <div class="header-button">
              <el-button type="primary">顶部快捷区</el-button>
              <el-button type="primary">可配置页面挂载</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="12"
          ><div class="header-right">
            <div class="header-button">
              <el-button type="primary">帮助手册</el-button>
              <span class="header-username">拉布拉多</span>
              <div class="header-avatar">
                <el-avatar
                  @click="getUserMenu"
                  class="avatar"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                ></el-avatar>
                <userMenu
                  :menuList="userMenuList"
                  :userMenuFlag="userMenuFlag"
                  @selectUserMenu="selectUserMenu"
                ></userMenu>
              </div>

              <el-button type="primary">退出</el-button>
            </div>
          </div></el-col
        >
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          :uniqueOpened="true"
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template #title>
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template #title>分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template #title>选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <template #title>导航二</template>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <template #title>导航三</template>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <template #title>导航四</template>
          </el-menu-item>
          <el-submenu index="5">
            <template #title>
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template #title>分组一</template>
              <el-menu-item index="5-1">选项1</el-menu-item>
              <el-menu-item index="5-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="5-3">选项3</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>内容区域</el-main>
    </el-container>
  </el-container>
</template>

<script>
import { ref } from "vue";
import userMenu from "../../components/userMenu/userMenu";
export default {
  components: {
    userMenu,
  },
  setup() {
    const userMenuFlag = ref(false);
    const userMenuList = ref([
      {
        type: 0,
        value: "修改密码",
      },
      {
        type: 1,
        value: "我的资料",
      },
      {
        type: 2,
        value: "任务状态",
      },
    ]);

    function selectUserMenu(item) {
      console.log(item, "item");
      userMenuFlag.value = false;
    }
    function getUserMenu() {
      userMenuFlag.value = !userMenuFlag.value;
    }
    return {
      userMenuList,
      selectUserMenu,
      userMenuFlag,
      getUserMenu,
    };
  },
};
</script>

<style lang='scss'>
.el-header,
.el-footer {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.header {
  height: 60px;
  &-row {
    height: 100%;
  }
}
.header-left {
  .el-row {
    height: 100%;
  }
  display: flex;
  .header-logo {
    width: 180px;
    height: 60px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .header-title {
    margin-left: 10px;
    color: #000;
    font-size: 16px;
  }
  .header-button {
    position: relative;
    margin-left: 10px;
  }
}
.header-right {
  display: flex;
  justify-items: center;
  justify-content: flex-end;
}
.header-username {
  margin: 0 20px;
}
.header-avatar {
  // width: 100%;
  // height: 100%;
  position: relative;
  margin-right: 20px;
  top: 10px;
}
.avatar {
  cursor: pointer;
}
.el-aside {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow-x: hidden;
  .el-menu-vertical-demo {
    width: 100%;
  }
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-container {
  height: calc(100vh - 60px);
}
.header-button {
  display: flex;
  align-items: center;
}
.userMenu {
  position: absolute;
  width: 150px;
  background-color: #ffffff;
  top: 50px;
  left: -59px;
  li {
    border: 1px solid #797979;
    cursor: pointer;
  }
  li:hover {
    background-color: #e9eef3;
  }
  // background-color: pink;
}
</style>